<script lang="ts" setup>
	import { onMounted, reactive } from "vue";
	import {
		onShow,
		onHide,
		onLoad,
	} from '@dcloudio/uni-app'
	const props = defineProps(['screenData'])
	const emit = defineEmits(['itemClick'])
	console.log(props.screenData, 'props.screenData');
	let data = reactive({
		name: 'wkiwi',
		height: 0,
		categoryActive: 0,
		scrollTop: 0,
		scrollLeftTop: 0,
		scrollHeight: 0,
		timeoutId: undefined,
		classifyData: props.screenData,
		arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672, 7017], //初始值，后边计算会根据手机适配覆盖
		leftItemHeight: 51, //49行会计算出新值进行覆盖
		navLeftHeight: 0, //左边scroll-view 内层nav的总高度
		diff: 0, //左边scroll-view 内层nav的总高度与视口之差
		tabBarHeight: 0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
		toView: ''
	})
	const getHeightList = () => {
		console.log(456);
		// 初始化
		// let _this = this;
		let selectorQuery = uni.createSelectorQuery();
		selectorQuery.selectAll('.nav-left-item').boundingClientRect(function (rects) {
			data.leftItemHeight = rects[0].height;
			data.navLeftHeight = data.leftItemHeight * data.classifyData.length;
			data.diff = data.navLeftHeight - data.height;
		});
		selectorQuery
			.selectAll('.box')
			.boundingClientRect(function (rects) {
				let arr = [0];
				let top = 0;
				rects.forEach(function (rect) {
					// 					rect.id      // 节点的ID
					// 					rect.dataset // 节点的dataset
					// 					rect.left    // 节点的左边界坐标
					// 					rect.right   // 节点的右边界坐标
					// 					rect.top     // 节点的上边界坐标
					// 					rect.bottom  // 节点的下边界坐标
					// 					rect.width   // 节点的宽度
					// 					rect.height  // 节点的高度
					top += rect.height;
					arr.push(top);
				});
				console.log(arr);
				data.arr = arr;
			})
			.exec();
	}
	const scroll = (e) => {
		// 匹配符合左边哪个标签
		// let _this = this;
		if (data.timeoutId) {
			clearTimeout(data.timeoutId);
		}
		data.timeoutId = setTimeout(function () {
			//节流
			data.scrollHeight = e.detail.scrollTop + 1
			// + data.height / 2;
			//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
			//若想使切换参考线为屏幕顶部请删除 _this.height/2
			for (let i = 0; i < data.arr.length; i++) {
				let height1 = data.arr[i];
				let height2 = data.arr[i + 1];
				if (!height2 || (data.scrollHeight >= height1 && data.scrollHeight < height2)) {
					data.categoryActive = i;
					data.diff > 0 && (data.scrollLeftTop = Math.round((data.categoryActive * data.diff) / (classifyData.length - 1)));
					return false;
				}
			}
			data.categoryActive = 0;
			data.timeoutId = undefined;
		}, 10);
	}
	const categoryClickMain = (index, item) => {
		//点击某一项
		// console.log(item.name);
		// data.toView = item.name + index
		data.categoryActive = index;
		data.scrollTop == data.arr[index] ? (data.scrollTop = data.scrollTop + 1) : (data.scrollTop = data.arr[index]); //防止两次相等造成点击不触发滚动时间
	}
	const cart = (item) => {
		//点击item
		emit('itemClick', item)
		uni.showToast({
			title: item.name,
			icon: 'none'
		});
	}
	onMounted(() => {
		console.log('guazaile');
		getHeightList();
	})
	onLoad(() => {
		data.height = uni.getSystemInfoSync().windowHeight - data.tabBarHeight;
	})
</script>
<template>
	<view class="page-body" :style="'height:' + data.height*2 + 'rpx'">
		<scroll-view class="nav-left" scroll-y :style="'height:' + data.height*2 + 'rpx'"
			:scroll-top="data.scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index,item)" :key="index"
				:class="index == data.categoryActive ? 'active' : ''" v-for="(item, index) in data.classifyData">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="data.scrollTop" @scroll="scroll"
			:style="'height:' + data.height*2 + 'rpx'" scroll-with-animation>
			<!-- :id="foods.name + index" :scroll-into-view="data.toView" -->
			<view v-for="(foods, index) in data.classifyData" :key="index" class="box">
				<view style="margin-bottom:10rpx;font-size: 36rpx;font-weight: 600;">
					{{foods.name}}
				</view>
				<view :id="i == 0 ? 'first' : ''" class="nav-right-item" v-for="(item, i) in foods.children" :key="i"
					@click="cart(item)">
					<image :src="item.images" />
					<view>{{ item.name }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<style lang="scss">
	.page-body {
		display: flex;
		background: rgba(0, 0, 0, 0);
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 180rpx;
		margin-right: 10rpx;
	}

	.nav-left-item {
		height: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 526rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.box {
		display: block;
		overflow: hidden;
		background-color: #fff;
		margin: 20rpx 0;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		// border-bottom: 20rpx solid #f3f3f3;
		/* min-height: 100vh; */
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		// min-height: 90vh;
	}

	.nav-right-item {
		width: 150rpx;
		height: 220rpx;
		float: left;
		text-align: center;
		// padding: 16rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		background: #fff;
	}

	.nav-right-item image {
		width: 142rpx;
		height: 142rpx;
	}

	.active {
		font-size: 32rpx;
		font-weight: 600;
		color: #CB645E;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
</style>